<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
	<button type="button" class="button small grey close right" data-dismiss="modal">×</button>
	<h3>
		{% if (lookupTitle is defined) %}
			{{ lookupTitle }}
		{% else %}
			Informations about IP not available
		{% endif %}
	</h3>
</div>
<div class="modal-body">
	<div id="ip-info-cover">
		<div id="map-canvas" class="left"></div>
		<div class="ip-info right">
			{% if (ipInfo is defined) %}
				{% for key, item in ipInfo %}
					<p>{{ item }}</p>
				{% endfor %}
			{% else %}
				<p>No info available</p>
			{% endif %}
		</div>
	</div>
</div>
</div>
</div>

{% if (latitude is defined) and (longitude is defined) %}
	<script type="text/javascript">
		var map;
		var myLatLng;

		var scriptUrl = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyCzyJnAH28AQIc9MZijruHfxJtWmFcKjMk&sensor=true&callback=initialize';
		function loadScript() {
			if (!$("script[src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCzyJnAH28AQIc9MZijruHfxJtWmFcKjMk&sensor=true&callback=initialize']").length) {
				$("script[src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCzyJnAH28AQIc9MZijruHfxJtWmFcKjMk&sensor=true&callback=initialize']").remove();
			}
			var script = document.createElement("script");
			script.type = "text/javascript";
			script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyCzyJnAH28AQIc9MZijruHfxJtWmFcKjMk&sensor=true&callback=initialize";
			document.body.appendChild(script);
		}

		function initialize() {
			myLatLng = new google.maps.LatLng({{ latitude }}, {{ longitude }});
			var mapOptions = {
				zoom: 12,
				center: myLatLng,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};

			map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

			var marker = new google.maps.Marker({
				position: myLatLng,
				map: map
			});
		}

		$(document).ready(function() {
			loadScript();
		});
	</script>
{% endif %}